<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue2的响应式原理</title>
</head>

<body>
    <button id="a1">控制台输出obj.name的参数</button>
    <br>
    <input type="text" name="" id="b1"> <button id="a2">修改obj.name的参数</button>

    <br>
    <button id='a3'>控制台输出obj里面arr</button>
    <br>
    <button id='a4'>通过下标的方式追加某个参数进入obj.arr里面</button>
    <br>
    <button id='a5'>通过直接赋值的方式修改obj.arr的参数</button>
    <br>
    <button id='a6'>通过下标的方式删除某个obj.arr的参数</button>
</body>
<script>
    let obj = {}
    let name = "害怕"
    let arr = {
        a: 1
    }
    Object.defineProperty(obj, 'name', {
        set(val) {
            console.log("obj监听到name发生修改了", val);
            return name = val
        },
        get() {
            console.log("obj监听到获取了name");
            return name
        }
    })

    Object.defineProperty(obj, 'arr', {
        set(val) {
            console.log("obj监听到arr发生修改了", val);
            return arr = val
        },
        get() {
            console.log("obj监听到获取了arr");
            return arr
        }
    })

    document.getElementById("a1").addEventListener("click", () => {
        console.log(obj.name);
    })
    document.getElementById("a2").addEventListener('click', () => {
        obj.name = document.getElementById("b1").value
    })


    document.getElementById("a3").addEventListener("click", () => {
        console.log(obj.arr);
    })
    let n = 0
    document.getElementById("a4").addEventListener("click", () => {
        obj.arr[n++] = n
    })
    document.getElementById("a5").addEventListener("click", () => {
        obj.arr = n
    })
    document.getElementById("a6").addEventListener("click", () => {
        delete obj.arr.a
    })

</script>

</html>